<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      :permission="permissionList"
      :before-open="beforeOpen"
      v-model:page="page"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
    >
      <template #menu-left>
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新 增</el-button>
      </template>
      <template #menu>
        <el-button
          v-for="(item, index) in menuList"
          :key="index"
          text
          type="primary"
          :style="item.menuStyle"
          @click="handleMenu(item)"
          >{{ item.text }}
          <component :is="item.icon" class="btn-icon" />
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const form = ref({});
const selectionList = ref([]);
const query = ref({});
const loading = ref(false);
const page = ref({
  pageSize: 10,
  currentPage: 1,
  total: 0,
});
const permissionList = reactive([]);
const option = ref({
  height: 'auto',
  calcHeight: 60,
  tip: false,
  searchShow: true,
  searchMenuSpan: 6,
  border: true,
  index: true,
  indexWidth: 80,
  indexLabel: '编号',
  menuWidth: 450,
  align: 'center',
  searchMenuSpan: 12,
  searchMenuPosition: 'right',
  viewBtn: false,
  delBtn: false,
  editBtn: false,
  addBtn: false,
  column: [
    {
      label: 'CRF名称',
      prop: 'serviceId',
      search: true,
    },
    {
      label: '量表类型',
      prop: 'serverHost',
      search: true,
    },
    {
      label: '是否共享',
      prop: 'serverIp',
    },
    {
      label: '创建时间',
      prop: 'createTime',
    },
    {
      label: '备注',
      prop: 'env',
    },
    {
      label: '编码设置',
      prop: 'envs',
    },
  ],
});
const data = ref([]);
const menuList = reactive([
  {
    text: '重命名',
    url: '',
    id: '1',
    menuStyle: {
      color: '#fb9a00',
    },
  },
  {
    text: '设 计',
    url: '',
    id: '2',
    menuStyle: {
      color: '#0077bd',
    },
  },
  {
    text: '高级设置',
    url: '',
    id: '3',
    menuStyle: {
      color: '#0077bd',
    },
  },
  {
    text: '试 用',
    url: '',
    id: '4',
    menuStyle: {
      color: '#00a65a',
    },
  },
  {
    text: '锁 定',
    url: '',
    id: '5',
    menuStyle: {
      color: '#fb9a00',
    },
  },
  {
    text: 'OCR配置',
    url: '',
    id: '6',
    menuStyle: {
      color: '#00c0ef',
    },
  },
  {
    text: '公开共享',
    url: '',
    id: '7',
    menuStyle: {
      color: '#0077bd',
    },
  },
  {
    text: '机构共享',
    url: '',
    id: '8',
    menuStyle: {
      color: '#0077bd',
    },
  },
  {
    text: '复 制',
    url: '',
    id: '9',
    menuStyle: {
      color: '#fb9a00',
    },
  },
  {
    text: '版本备份',
    url: '',
    id: '10',
    menuStyle: {
      color: '#00c0ef',
    },
  },
  {
    text: '备 注',
    url: '',
    id: '11',
    menuStyle: {
      color: '#fb9a00',
    },
  },
  {
    text: '删 除',
    url: '',
    id: '12',
    menuStyle: {
      color: '#ff1c00',
    },
  },
  {
    text: '',
    url: '',
    id: '13',
    icon: 'Microphone',
    menuStyle: {
      color: '#00a65a',
    },
  },
  {
    text: '',
    url: '',
    id: '14',
    icon: 'VideoCamera',
    menuStyle: {
      color: '#00a65a',
    },
  },
]);
// 新增
const handleAdd = () => {
  router.push({
    path: '/add',
    query: {
      type: '3',
    },
  });
};
// 操作栏点击事件
const handleMenu = item => {
  console.log(item);
  if (item.id == '2') {
    router.push({
      path: '/scaleTemplate/formDesign',
    });
  }
};
const rowSave = (row, done, loading) => {
  done(row);
};
const rowDel = (row, index, done) => {
  done(row);
};
const rowUpdate = (row, index, done, loading) => {
  done(row);
};
const searchReset = () => {
  query.value = {};
  onLoad(page.value);
};
const searchChange = (params, done) => {
  query.value = params;
  page.value.currentPage = 1;
  onLoad(page.value, params);
  done();
};
const beforeOpen = (done, type) => {
  if (['edit', 'view'].includes(type)) {
    getApiLogs(form.value.id).then(res => {
      form.value = res.data.data;
    });
  }
  done();
};
const currentChange = currentPage => {
  page.value.currentPage = currentPage;
};
const sizeChange = pageSize => {
  page.value.pageSize = pageSize;
};
const refreshChange = () => {
  onLoad(page.value, query.value);
};
const onLoad = (page, params = {}) => {
  const values = {
    ...query.value,
  };
  // loading.value = true;
  // getApiList(page.currentPage, page.pageSize, Object.assign(params, values)).then(res => {
  //   const data = res.data.data;
  //   page.total = data.total;
  //   data.value = data.records;
  //   loading.value = false;
  //   selectionClear();
  // });
  data.value = [
    {
      serviceId: '2222',
      serverHost: '2222',
      serverIp: '2222',
      env: '2222',
      createTime: '2222',
    },
  ];
};
</script>
<style scoped lang="scss">
.btn-icon {
  width: 18px;
  height: 18px;
}
</style>
